<template>
  <div class="green-result-view">
    <!-- 指标卡片区 -->
    <el-row :gutter="24" class="card-row">
      <el-col v-for="item in keyMetrics" :key="item.title" :span="6">
        <el-card class="metric-card" shadow="hover">
          <div class="metric-title">{{ item.title }}</div>
          <div class="metric-value" :style="{ color: item.color }">
            {{ item.value }}
            <span class="metric-unit">{{ item.unit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">绿色性能评估雷达图</div>
          <div ref="radarRef" style="width:100%;height:340px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">碳排放与用能结构</div>
          <div ref="barRef" style="width:100%;height:340px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top:32px;">
      <div class="summary-title">评估结论与建议</div>
      <div class="summary-content">
        本项目绿色性能综合得分为 <b>{{ mainScore }}</b>，评级为 <b>{{ mainGrade }}</b>。
        <br>
        <ul>
          <li>建筑能耗达标，但可提升智能照明和空调分区管控节能措施。</li>
          <li>碳排放偏高，建议加强绿色采购、设备能效改造。</li>
          <li>用水效率良好，雨水回用比率有提升空间。</li>
          <li>建议持续跟踪各项能耗并动态调整节能策略。</li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 关键指标模拟数据
const keyMetrics = [
  { title: '综合得分', value: 86.5, unit: '分', color: '#67C23A' },
  { title: '绿色评级', value: '三星级', unit: '', color: '#409EFF' },
  { title: '单位能耗', value: '38.6', unit: 'kWh/㎡·a', color: '#13C2C2' },
  { title: '碳排放', value: '14.5', unit: 'kgCO₂/㎡·a', color: '#E6A23C' }
]
const mainScore = 86.5
const mainGrade = '三星级'

// 雷达图数据
const radarRef = ref<HTMLDivElement>()
const radarData = [
  { name: '建筑能耗', value: 88 },
  { name: '碳排放', value: 72 },
  { name: '用水效率', value: 80 },
  { name: '可再生能源利用', value: 64 },
  { name: '室内环境', value: 90 },
  { name: '智能化水平', value: 78 }
]

// 柱状图数据
const barRef = ref<HTMLDivElement>()
const barX = ['空调', '照明', '电梯', '插座', '其他']
const barData = [42, 20, 12, 16, 10]
const barCO2 = [6.8, 2.9, 2.0, 1.8, 1.0]

onMounted(() => {
  // 雷达图
  if (radarRef.value) {
    const radarChart = echarts.init(radarRef.value)
    radarChart.setOption({
      tooltip: {},
      radar: {
        indicator: radarData.map(i => ({ name: i.name, max: 100 })),
        splitArea: { areaStyle: { color: ['#f6ffed', '#e3f9e0'] } }
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: radarData.map(i => i.value),
              name: '绿色性能',
              areaStyle: { color: 'rgba(103,194,58,0.15)' },
              lineStyle: { color: '#67C23A' }
            }
          ]
        }
      ]
    })
  }
  // 柱状图
  if (barRef.value) {
    const barChart = echarts.init(barRef.value)
    barChart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['能耗', '碳排放'] },
      xAxis: { type: 'category', data: barX },
      yAxis: { type: 'value' },
      series: [
        { name: '能耗', type: 'bar', data: barData, barWidth: 28 },
        { name: '碳排放', type: 'bar', data: barCO2, barWidth: 28 }
      ],
      color: ['#409EFF', '#E6A23C']
    })
  }
})
</script>

<style scoped>
.green-result-view {
  width: 100%;
  margin: 0;
  padding: 32px 0;
}
.card-row {
  margin-bottom: 8px;
}
.metric-card {
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(120deg,#fff 70%,#e7fbee 100%);
  box-shadow: 0 2px 12px #0001;
  min-height: 120px;
  margin-bottom: 16px;
}
.metric-title {
  font-size: 15px;
  color: #888;
  margin-top: 10px;
}
.metric-value {
  font-size: 34px;
  font-weight: bold;
  margin-top: 10px;
}
.metric-unit {
  font-size: 16px;
  margin-left: 4px;
  color: #888;
}
.chart-title {
  font-size: 17px;
  color: #222;
  font-weight: bold;
  margin-bottom: 16px;
}
.summary-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}
.summary-content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-left: 6px;
}
.summary-content ul {
  margin: 4px 0 0 22px;
  padding: 0;
  color: #308d2d;
}
</style>
